.consumerCard {
  width: 680rpx;
  height: 234rpx;
  overflow: hidden;
  margin: auto;
  background-color: #fff;

  // position: relative;
  margin-bottom: 30rpx;
  border-radius: 20rpx;

  display: flex;
  justify-content: center;
  // box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.2);
  .content-wrap {
    position: relative;
    width: 680rpx;
    height: 234rpx;
    background-color: #fff;
    box-shadow: 0 0 2px 2px lightgray;

    box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.2);
    .detail {
      margin: 40rpx 40rpx 0 50rpx;
      display: flex;

      .img {
        width: 168rpx;
        height: 112rpx;
        margin-right: 20rpx;
        border-radius: 8px;
      }

      .info {
        margin-top: -4rpx;

        .info-title {
          font-size: 28rpx;

          font-weight: 500;
          color: #343434;
        }

        .info-category {
          display: inline-block;
          padding: 7rpx;
          min-width: 100rpx;
          border: 2rpx solid #ddd;
          border-radius: 6rpx;
          border-radius: 4px;
          font-size: 18rpx;
          font-weight: 300;
          color: #999;
        }

        .info-time {
          margin-top: 10rpx;
          font-size: 20rpx;

          font-weight: 300;
          color: #9A9A9A;
        }
      }

      .btn {
        float: right;

        padding: 17rpx 15rpx;
        text-align: center;
        position: absolute;
        right: 40rpx;

        width: 56px;
        height: 60rpx;
        font-size: 28rpx;
        font-family: PingFangSC;
        font-weight: 500;
        color: #FFFFFF;
        background: #FF6537;
        border-radius: 8rpx;
        line-height: 32rpx;
      }

    }

    .explain {
      margin: 17rpx 50rpx 0 50rpx;
      border-top: 1rpx dashed #e4e4e4;
      color: #9a9a9a;
      padding-top: 20rpx;
      font-size: 20rpx;
    }

    .left-icon::before,
    .right-icon::before {
      position: absolute;
      content: '';
      top: 155px;
      width: 40px;
      padding: 20px 0;
      border-radius: 50%;
      box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.2);
      background-color: #f4f4f4;
    }

    .left-icon::before {
      left: -20px;
    }

    .right-icon::before {
      right: -20px;
    }

    .left-icon::after,
    .right-icon::after {
      position: absolute;
      top: 300px;
      content: '';
      width: 20px;
      height: 40px;
      background-color: #f4f4f4;
    }

    .left-icon::after {
      left: -22px;
    }

    .right-icon::after {
      right: -22px;
    }
  }



  // .cro{
  //   width: 680rpx;
  // height: 234rpx;
  //    background: radial-gradient(circle at 7rpx 155rpx, transparent 36rpx, #fff 10px) top left, linear-gradient(0.25turn, #fff, #fff), radial-gradient(circle at 43rpx 155rpx, transparent 36rpx, #fff 10px) bottom right;
  // // radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);
  // background-size: 50rpx 234rpx, 580rpx 234rpx, 50rpx 234rpx;
  // background-repeat: no-repeat;
  // background-position: 0rpx 0rpx, 50rpx 0rpx, 629rpx 0rpx;

  // box-shadow: 1px 4px 16px 1px rgba(0, 0, 0, 0.12);
  // }




  // .cro {
  //   width: 100px;

  //   height: 100px;

  //   border: 1px solid #58C4E6;

  //   position: relative;

  // }

  // .cro_left_top,
  // .cro_right_top,
  // .cro_left_bottom,
  // .cro_right_bottom {
  //   position: absolute;

  //   width: 20px;

  //   height: 20px;

  //   border: 1px solid #fff;

  //   z-index: 1;

  //   background: #fff;

  // }

  // .cro_left_top {
  //   top: -1px;

  //   left: -1px;

  //   border-radius: 0px 0px 20px 0px;

  //   border-bottom: 1px solid #58C4E6;

  //   border-right: 1px solid #58C4E6;

  // }

  // .cro_right_top {
  //   top: -1px;

  //   right: -1px;

  //   border-radius: 0px 0px 0px 20px;

  //   border-bottom: 1px solid #58C4E6;

  //   border-left: 1px solid #58C4E6;

  // }

  // .cro_left_bottom {
  //   left: -1px;

  //   bottom: -1px;

  //   border-radius: 0px 20px 0px 0px;

  //   border-top: 1px solid #58C4E6;

  //   border-right: 1px solid #58C4E6;

  // }

  // .cro_right_bottom {
  //   right: -1px;

  //   bottom: -1px;

  //   border-radius: 20px 0px 0px 0px;

  //   border-top: 1px solid #58C4E6;

  //   border-left: 1px solid #58C4E6;

  // }





  .text {
    // display: inline-block;
    margin-left: 20rpx;
    // flex-direction:  column ;

    .title {
      color: #333333;
      font-size: 28rpx;
      font-weight: 600;
      // display: inline-block;
      width: 420rpx;
      height: 80rpx;
      // border: 0;
      // vertical-align: top;
      // margin-top: -6rpx;
    }

    .introduction {
      margin-top: 10rpx;
      color: #999999;
      width: 420rpx;
      font-size: 22rpx;

      word-break: break-all;

      text-overflow: ellipsis;

      display: -webkit-box;
      /** 对象作为伸缩盒子模型显示 **/

      -webkit-box-orient: vertical;
      /** 设置或检索伸缩盒对象的子元素的排列方式 **/

      -webkit-line-clamp: 2;
      /** 显示的行数 **/

      overflow: hidden;
      /** 隐藏超出的内容 **/
    }
  }
}
